import React, { useState, useEffect } from 'react';
import './content.css'
// 使用useRef清除ID

const ImageSlider = (props,{interval = 5000 }) => {
    const images=[
        require(`../products-images/${props.images}-1-product.webp`),
        require(`../products-images/${props.images}-2-product.webp`),
    ]
    const [currentImageIndex, setCurrentImageIndex] = useState(0);

    useEffect(() => {
        // 设置定时器，每隔一定时间切换图片
        const intervalId = setInterval(() => {
            // 切换到下一张图片
            setCurrentImageIndex((prevIndex) => (prevIndex + 1) % images.length);
        }, interval);

        // 在组件卸载或依赖项变化时清除定时器，ID清除设为null
        return () => clearInterval(intervalId);
    }, [currentImageIndex, images.length, interval]);

    return (
        <div>
            <img
                src={images[currentImageIndex]}
                alt={`Slide ${currentImageIndex + 1}`}
                className={"logoStyle"}
            />
        </div>
    );
};

export default ImageSlider;